<template>
    <div>
        <!-- 充值 -->
        <el-dialog v-dialogDrag :visible.sync="VoucherCenterdialogVisible" width="480px" :append-to-body="true" title="充值" center class="VoucherCenterdialogVisible" @close="resetFormLabelAlign()">
            <div class="account_tag">
                <!-- 支付方式 -->
                <div class="way">
                    <p style="margin-bottom: 10px; color: #f1e4c8">支付方式</p>
                    <el-radio-group v-model="way">
                        <el-radio-button v-for="item in payProductList" :key="item.id" :label="item.id">
                            <div :class="item.paymentServiceType === 2 ? 'alipay flex-vc' : 'wechat flex-vc'">
                                <img
                                    :src="
                                        item.paymentServiceType === 2 || item.paymentServiceType === 6
                                            ? require('@/assets/user/alipay.png')
                                            : item.paymentServiceType === 4 || item.paymentServiceType === 7
                                            ? require('@/assets/user/YL.png')
                                            : require('@/assets/user/wechat.png')
                                    "
                                    alt=""
                                />
                                <div style="margin-left: 15px">
                                    <h3>{{ item.name }}</h3>
                                    <p>{{ item.paymentServiceType === 2 ? 'ALIPAY' : item.paymentServiceType === 4 ? 'UNION' : 'WECHAT' }}</p>
                                </div>
                            </div>
                        </el-radio-button>
                    </el-radio-group>
                </div>
                <!-- 选择金额 -->
                <div class="money">
                    <p style="margin-bottom: 10px; color: #f1e4c8">选择金额</p>
                    <el-input
                        v-model="money"
                        placeholder="请输入充值金额"
                        @keyup.enter.native="PayQrcodes()"
                        @focus="money1 = ''"
                        @blur="xiaofei()"
                        oninput="value=value.replace(/[^\d]/g,'')"
                    ></el-input>
                    <el-radio-group v-model="money1" size="mini" v-for="(item, index) in label" :key="index" @input="fuzhi()">
                        <!-- <el-radio-button plain size="mini" :label="item.cash + '元' + '\xa0\xa0送' + item.giving + '%'"></el-radio-button> -->
                        <el-radio-button plain size="mini" :label="item.button"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="integral" v-if="integral_show">
                    <p style="margin-bottom: 10px; color: #f1e4c8">消费点</p>
                    <!-- <div class="flex">
                <el-select v-model="pointId" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.amount" :value="item.id"></el-option>
                </el-select>
            </div> -->
                    <p class="integral_p">使用消费点：{{ xiaofeidian }} / {{ newPayPoint }}</p>
                </div>
                <!-- 立刻充值按钮 -->
                <el-button class="button_btn" :loading="loading" style="margin-top: 10px" type="primary" @click="PayQrcodes">
                    <span v-if="!loading">立刻充值</span>
                    <span v-else>加载中...</span>
                </el-button>
                <!-- 提示 -->
                <div class="hint">
                    <h5 style="color: #dddddd; font-size: 14px; font-family: '微软雅黑'; font-weight: 500">注意事项</h5>
                    <p v-html="test" style="font-size: 12px; font-family: '微软雅黑'; color: #ae8d6a; letter-spacing: 0.12px"></p>
                </div>
                <!--支付二维码弹窗 -->
                <el-dialog :title="title" v-dialogDrag :visible.sync="payDialogVisible" :modal-append-to-body="false" :append-to-body="true" width="330px" @close="close" center class="mm">
                    <div slot="title" class="header-title">
                        <img
                            :src="title === '支付宝支付' ? require('@/assets/user/zfb.png') : title === '银联支付' ? require('@/assets/user/YL.png') : require('@/assets/user/wx.png')"
                            style="width: 20px; margin-right: 5px; margin-top: -2px"
                            alt=""
                        />
                        <span>{{ title }}</span>
                    </div>
                    <div class="pay">
                        <h4 class="order" style="margin-bottom: 0px; margin-top: -30px">订单编号：{{ orderNo }}</h4>
                        <p class="order" style="margin-bottom: 30px">订单时间：{{ creationTime }}</p>
                        <img :src="payUrl" alt="" />
                        <!-- <img src="@/assets/images/WX-kf/WX_kf.png" alt="" /> -->
                        <h2>
                            应付金额:
                            <span>{{ amount }}.00</span>
                            元
                        </h2>
                        <p class="sys">{{ content }}</p>
                    </div>
                </el-dialog>
                <!--支付成功弹窗 -->
                <el-dialog v-dialogDrag title="游戏充值" :visible.sync="succeedDialogVisible" :modal-append-to-body="false" :append-to-body="true" width="330px" center class="mm">
                    <div class="pay">
                        <svg-icon icon-file-name="succeed" style="font-size: 70px; margin-left: 50%; transform: translateX(-50%); margin-top: 30px" />
                        <p style="font-size: 14px; font-family: '微软雅黑'; font-weight: 400; text-align: center; color: #dddddd; letter-spacing: 0.42px; margin-top: 20px">充值成功</p>
                        <p style="font-family: '微软雅黑'; font-weight: 400; text-align: center; color: #fff2d5; letter-spacing: 0.33px; font-size: 16px; margin-top: 8px">
                            到账
                            <span style="color: #ffb331">{{ platformCurrency }}</span>
                            平台币
                        </p>
                        <el-button class="button_btn btn" type="primary" @click="close_succeedDialogVisible">关闭</el-button>
                    </div>
                </el-dialog>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ratios, PayQrcodes, paystatuss, prompts, GetTopUpAmounts, selectPayPoints } from '@/api/url'
export default {
  created () {
  },
  data () {
    return {
      integral_show: false,
      VoucherCenterdialogVisible: false,
      sceneStr: '', // 二维码唯一标识
      content: '',
      title: '',
      platformCurrency: '',//充值成功返回的平台币
      label: [],
      xiaofeidian: '0',
      orderNo: '', // 订单号
      creationTime: '', // 订单时间
      amount: '', // 后台返回的充值金额
      loading: false,
      payDialogVisible: false, // 二维码充值界面默认不显示
      succeedDialogVisible: false, // 充值成功界面默认不显示
      payUrl: '', // 支付二维码
      way: '1',
      money: '', // 选择的金额
      money1: '', // 选择的金额
      payProductId: '',
      maxWechat: '', // 微信充值最大限额
      payList: {},
      test: '', // 充值提示的文本
      time: '',
      min: '',
      options: [],
      newPayPoint: '',//消费点
      code: 500,
      startTime: 0, // 初始开始请求时间
      timer: null,
      payProductList: []// 支付产品
    }
  },
  mounted () {
    this.$EventBus.$on('open_VoucherCenterdialogVisible', (data) => { this.open_VoucherCenterdialogVisible() })
  },
  methods: {
    open_VoucherCenterdialogVisible () {
      this.ratios()
      this.prompts()
      this.GetTopUpAmounts()
      this.selectPayPoints().then(() => {
        this.VoucherCenterdialogVisible = true
      })
    },
    fuzhi () {
      this.money = this.money1.split('元')[0]
      if (this.money > this.newPayPoint) {
        this.xiaofeidian = this.newPayPoint
      } else {
        this.xiaofeidian = this.money
      }
    },
    xiaofei () {
      if (this.money > this.newPayPoint) {
        this.xiaofeidian = this.newPayPoint
      } else {
        this.xiaofeidian = this.money
      }
    },
    // 点击关闭时清空input账户的的数据，关闭轮询
    resetFormLabelAlign () {
      this.money = ''
      this.money1 = ''
      this.xiaofeidian = 0
      clearTimeout(this.timer)
      this.loading = false
    },
    close_succeedDialogVisible () {
      this.succeedDialogVisible = false
      this.selectPayPoints()
      this.xiaofeidian = 0
      this.$EventBus.$emit('callGetInfos', 1)//调用个人中心的getInfo方法
      this.$EventBus.$emit('callTopGetInfos', 1)//调用首页的gitInfo方法
    },
    close () {
      this.payDialogVisible = false
      clearTimeout(this.timer)
    },
    // 获取支付产品、充值赠送比例
    async ratios () {
      try {
        const res = await ratios({ product: 2 })
        if (res.data.code === 200) {
          this.min = res.data.min
          this.payProductList = res.data.productList
          this.maxWechat = res.data.productList[0].maxQuota
          this.maxZFB = res.data.productList[1].maxQuota
        } else {
          console.log()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询会员可用消费积分
    async selectPayPoints () {
      try {
        const res = await selectPayPoints()
        if (res.data.code === 200) {
          // console.log(res)
          this.options = res.data.status
          this.newPayPoint = res.data.newPayPoint
          if (this.options !== 0) {
            this.integral_show = true
          }
        } else {
          console.log()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取充值提示的文本
    async prompts () {
      try {
        const res = await prompts()
        // console.log(res)
        if (res.data.code === 200) {
          this.test = res.data.data
        } else {
          console.log()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询充值金额
    async GetTopUpAmounts () {
      try {
        const res = await GetTopUpAmounts()
        // console.log(res)
        if (res.data.code === 200) {
          const array = res.data.data
          const array1 = JSON.parse(array)
          // console.log(array1)
          this.label = array1
          // console.log(this.label)
        } else {
          console.log()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取充值二维码
    async PayQrcodes () {
      try {
        const channelId = box_info.m_dym_channel_id
        if ((this.maxWechat || this.maxZFB) < this.money) {
          this.$message({ message: '您输入的值已经超出最大充值金额', type: 'error', center: true })
        } else if (this.money === '' || this.way === '') { this.$message({ message: '请选择充值支付方式或者支付金额', type: 'error', center: true }) } else {
          if (this.money < this.min) { this.$message({ message: '您输入的值已经低于最低充值金额', type: 'error', center: true }) } else {
            this.loading = true
            try {
              const res = await PayQrcodes({ payProductId: this.way, money: parseInt(this.money), channelId: channelId })
              if (res.data.code === 200) {
                // console.log(res)
                this.payUrl = 'data:image/gif;base64,' + res.data.img
                this.payList = res.data
                this.orderNo = res.data.orderNo
                this.creationTime = res.data.creationTime
                this.amount = res.data.amount
                this.content = res.data.content
                this.title = res.data.title
                this.sceneStr = res.data.sceneStr
                this.payDialogVisible = true
                this.loading = false
                this.handlerData()
              } else if (res.data.code === 500 && res.data.data === -1) {
                this.$message({ message: res.data.msg, type: 'warning', center: true })
                this.loading = false
              } else {
                console.log(res.data.msg)
                this.loading = false
              }
            } catch (error) {
              console.log(error)
              this.loading = false
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 点击跳转返回首页
    go_home () {
      this.$router.push('/')
      this.succeedDialogVisible = false
    },
    // 开始准备轮询
    handlerData () {
      this.startTime = new Date().getTime() // 获取触发轮询时的时间
      this.inquireData() // 调用轮询接口,开始进行轮询
    },
    inquireData () {
      const reload = () => {
        clearTimeout(this.timer) // 清除定时器
        // 超过50秒则停止轮询
        if (new Date().getTime() - this.startTime > 50000) {
          clearTimeout(this.timer)
          this.$message({ message: '充值超时,请再试一次', type: 'error', center: true })
          this.payDialogVisible = false
          return
        }
        // 1s一次, 轮询中
        this.timer = setTimeout(() => {
          this.inquireData() // 调用轮询
        }, 1000)
      }
      // 获取微信二维码扫码状态(轮询)
      paystatuss({ sceneStr: this.sceneStr })
        .then(res => {
          this.code = res.data.code
          if (res.data.code === 200 && res.data.error === undefined) {
            this.platformCurrency = res.data.platformCurrency
            clearInterval(this.time)
            setTimeout(() => {
              this.payDialogVisible = false
            }, 50)
            this.succeedDialogVisible = true
          } else {
            // 没成功,调用轮询
            reload()
          }
        })
        .catch(err => {
          // 请求错误,也继续轮询
          console.log(err)
          reload()
        })
    },
  },
  computed: {},
  beforeDestroy () {//移除监听事件
    clearTimeout(this.timer)
    this.$EventBus.$off("open_VoucherCenterdialogVisible")
  },
  watch: {},
  filters: {},
  components: {}
}
</script>

<style scoped lang='less'>
/deep/.el-dialog__body {
    background: url('@/assets/dialogImg/VoucherCenterBG.png');
    height: 100% !important;
}
.integral {
    margin-top: 10px;
    margin-bottom: 10px;
    .integral_p {
        margin-top: 10px;
        font-size: 12px;
        font-family: '微软雅黑';
        font-weight: 400;
        text-align: left;
        letter-spacing: 0.12px;
        color: #ffb331;
    }
}
.account_tag {
    font-family: '微软雅黑' !important;
    .border {
        border-bottom: 1px solid #dfdfe0;
        padding-bottom: 15px;
        margin-bottom: 20px;
        .el-divider--vertical {
            width: 3px;
            height: 20px;
            background: #f68121;
            margin: 0 8px 0 0;
        }
        h2 {
            font-size: 20px;
            font-family: '微软雅黑';
            font-weight: 400;
            color: #222223;
        }
    }
    .el-button--primary {
        width: 420px;
    }
    .way {
        margin-top: -30px;
        margin-bottom: 10px;
        .alipay,
        .wechat {
            padding: 8px 11px;
            width: 120px;
            height: 54px;
            img {
                width: 38px;
            }
            h3,
            p {
                font-size: 12px;
                font-family: '微软雅黑';
                font-weight: 400;
                line-height: 16px;
                text-align-last: left;
            }
        }
        /deep/.el-radio-button {
            margin-right: 26px;
            margin-bottom: 10px;
            &:nth-child(3) {
                margin-right: 0 !important;
            }
            &:nth-child(6) {
                margin-right: 0 !important;
            }
        }
        /deep/.el-radio-button__inner {
            padding: 0 !important;
            border-radius: 4px;
            border: 1px solid #7b7059;
            background-color: transparent;
            color: #7b7059;
            &:hover {
                color: #e64826 !important;
                border: 1px solid #e64826 !important;
            }
        }
        /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background-color: transparent;
            border: 1px solid #e64826;
            border-radius: 4px;
            box-shadow: 0px 0 0 0 #fff;
            color: #e64826 !important;
        }
        /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner::after {
            content: '';
            height: 8px;
            width: 8px;
            background-image: url(@/assets/user/gou.png);
            background-size: 8px 8px;
            position: absolute;
            right: -1px;
            bottom: 0;
        }
    }
    .money {
        .el-button--mini {
            width: 70px;
        }
        /deep/.el-input__inner {
            margin-bottom: 12px;
            font-family: '微软雅黑';
            color: #ffb331;
        }
        /deep/.el-radio-button__inner {
            margin-right: 10px;
            margin-bottom: 10px;
            border: 1px solid #ffb331;
            background: transparent;
            color: #ffb331;
            border-radius: 16px !important;
            &:hover {
                color: #020102 !important;
                background: #ffb331;
                border: 1px solid #ffb331 !important;
            }
        }
        /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
            color: #020102 !important;
            background: #ffb331;
            border: 1px solid #ffb331;
            box-shadow: 0px 0 0 0 #fff;
        }
        //修改el-input 输入框placeholder颜色
        /deep/input::-webkit-input-placeholder {
            color: #978152;
            font-family: '微软雅黑';
        }
    }
    .hint {
        margin-top: 20px;
        min-height: 77px;
        background: transparent;
        h5 {
            font-size: 12px;
            font-family: '微软雅黑';
            font-weight: 400;
            text-align: left;
            line-height: 20px;
        }
        p {
            font-size: 12px;
            font-family: '微软雅黑';
            font-weight: 400;
            text-align: left;
            color: #979797;
            line-height: 20px;
        }
    }
}
.btn {
    margin-top: 95px;
    margin-bottom: 20px;
    width: 262px !important;
    height: 37px;
    margin-left: 50%;
    transform: translateX(-50%);
}
.pay {
    .order {
        transform: scale(0.9);
        font-family: '微软雅黑';
        font-weight: 400;
        color: #fff2d5;
    }
    img {
        width: 200px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }
    h2 {
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        text-align: center;
        color: #fff2d5;
        span {
            color: #ffb331;
        }
    }
    .sys {
        padding-top: 60px;
        padding-bottom: 20px;
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 600;
        text-align: center;
        color: #fff2d5;
    }
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #ae8d6a;
}
.header-title {
    font-family: 微软雅黑;
    color: #f1e4c8 !important;
}
</style>
